<template>
    <div id="app">
        <div class="box">
            <el-date-picker v-model="search.StarTime" type="datetime" placeholder="开始时间"></el-date-picker> -
            <el-date-picker v-model="search.EndTime" type="datetime" placeholder="结束时间"></el-date-picker>

            <el-input class="l-input" style="margin-left: 20px;" v-model="search.keyWords" placeholder="关键字搜索"></el-input>
            <el-button type="primary" class="l-margin-l15" v-on:click="onserach()">查询</el-button>
        </div>
        <div class="box">
            <el-table :data="list" border :highlight-current-row="true"  :height="`calc(100vh - 305px)`" >
                <el-table-column label="记录时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.createTime }}
                    </template>
                </el-table-column>
                <el-table-column label="当前登录用户" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.createUserCode }}({{ scope.row.createUserName }})
                    </template>
                </el-table-column>
                <el-table-column label="请求方法" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.requestPath }}
                    </template>
                </el-table-column>
                <el-table-column label="错误消息" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.message }}
                    </template>
                </el-table-column>

                <el-table-column label="登录IP" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.ip }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right" align="center">
                    <template slot-scope="scope">

                        <el-button type="primary" size="mini" v-on:click="onLookDes(scope.row)">查看详情信息</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="height: 10px">&nbsp;</div>
        <div class="box">
            <el-pagination v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                v-bind:current-page="currentPage" v-bind:page-sizes="[10, 20, 30, 40]" v-bind:page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper" v-if="reflushPageFlag" v-bind:total="total">
            </el-pagination>
        </div>

        <el-dialog title="详情信息" :close-on-click-modal="false" :visible.sync="dialogVisible" width="60%">
            <div class="l-div-400">
                <el-input type="textarea" :rows="18" v-model="stackTrace">
                </el-input>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>

import { GetErrorLogList } from  '@/service/systemapi';
export default {
    components: {

    },
    data() {
        return {
            stackTrace: "",
            dialogVisible: false,
            list: [],
            search: {
                keyWords: "",
                StarTime: "",
                EndTime: ""
            },
            //分页 开始
            currentPage: 1,
            pagesize: 10,
            total: 0,
            reflushPageFlag: true,
            //分页 结束

        };
    },
    created() {
        this.InitData();

    },
    watch: {},
    methods: {
        onserach() {
            this.currentPage = 1;
            this.getList();
        },
        onLookDes(row) {
            this.dialogVisible = true;
            this.stackTrace = row.stackTrace;
        },
        //初始化
        InitData() {
            this.getList();
        },
        //查询列表
        getList() {
            this.openLoading();
            this.list = [];
            var that = this;

            let jsondata = {
                PageIndex: this.currentPage,
                PageSize: this.pagesize,
                keyWords: this.search.keyWords,
                StarTime: this.search.StarTime,
                EndTime: this.search.EndTime,
            };
            GetErrorLogList(jsondata)
                .then((res) => {
                    if (res.success) {
                        if (res.data != undefined) {
                            that.list = res.data.list;
                            that.total = res.data.total;

                            that.$nextTick(function () {
                                that.reflushPageFlag = true;
                            });
                        }
                    } else {
                        that.$message.error(res.msg);
                    }

                    that.closeLoading();
                })
                .catch((err) => {
                    this.$message.error("数据请求异常");
                    that.closeLoading();
                });
        },
        //当前条
        handleSizeChange(val) {
            this.pagesize = val;
            this.getList();
        },
        //当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
        },
       
    },
};
</script>
  
<style scoped>
#app {
    /* padding: 20px; */
    /* background:-webkit-linear-gradient(left,#03a9f4,#f44336); */
}

.l-input {
    display: inline-block;
    width: 260px;
}

.l-input-form {
    display: inline-block;
    width: 220px;
}

.l-margin-l15 {
    margin-left: 15px;
}

.l-red {
    color: red;
}
</style>